<template>
  <div class="padding_10">
    <div class="grid_4_column">
      <!-- 上课日期 -->
      <div class="flex_y_center">
        <div style="width: 70px; text-align: right">上课日期：</div>

        <el-date-picker
          v-model="value1"
          end-placeholder="结束日期"
          range-separator="至"
          start-placeholder="开始日期"
          type="daterange"
          value-format="yyyy-MM-dd"
          @change="datePicker"
        />
      </div>
      <!-- 课程名 -->
      <div class="flex_y_center">
        <div style="width: 80px; text-align: right">课程名：</div>
        <el-input
          v-model="form.goods_name"
          placeholder="请输入课程名"
          @keyup.enter.native="searchs()"
        />
      </div>
      <!-- 老师名 -->
      <div class="flex_y_center">
        <div style="width: 80px; text-align: right">老师名：</div>
        <el-input
          v-model="form.user_name"
          placeholder="请输入老师名"
          @keyup.enter.native="searchs()"
        />
      </div>
      <!-- 孩子名 -->
      <div class="flex_y_center">
        <div style="width: 80px; text-align: right">孩子名：</div>
        <el-input
          v-model="form.nick_name"
          placeholder="请输入孩子名"
          @keyup.enter.native="searchs()"
        />
      </div>
    </div>
    <div style="margin-top: 10px">
      <el-button type="primary" @click="searchs">搜索</el-button>
      <el-button
        v-permissions="{ permission: ['export:Courselog'] }"
        type="primary"
        @click="exporte"
      >
        导出
      </el-button>
      <el-button
        v-permissions="{ permission: ['export-view:Courselog'] }"
        type="primary"
        @click="exportList"
      >
        导出列表
      </el-button>

      <el-button @click="Reset">重置</el-button>
    </div>

    <div class="overview_content">
      <div
        v-if="Object.keys(courseOverview).length != 0"
        class="content_items flex_y_center"
      >
        <!-- <div class="items">
          <h4>
            {{ dateItem[0] }}至{{ dateItem[1] }}
            <br />
            课程概况
          </h4>
        </div> -->
        <div class="items">
          <div class="items_h">{{ dateItem[0] }}至{{ dateItem[1] }}</div>
          <div class="items_val">课程概况</div>
        </div>
        <div class="items">
          <div class="items_h">消课数</div>
          <div class="items_val">
            {{ courseOverview.total_consume }}节/￥{{
              courseOverview.total_consume_money
            }}元
          </div>
        </div>
        <div class="items">
          <div class="items_h">待消课数</div>
          <div class="items_val">
            {{ courseOverview.total_wait }}节/￥{{
              courseOverview.total_wait_money
            }}元
          </div>
        </div>
        <div class="items">
          <div class="items_h">请假数</div>
          <div class="items_val">{{ courseOverview.total_exception }}节</div>
        </div>
        <div>
          <div class="items_h">消课完成比例</div>
          <div class="items_val">{{ courseOverview.consume_percent }}%</div>
        </div>
      </div>
    </div>

    <div>
      <el-table :data="tableData" :empty-text="emptyText" style="width: 100%">
        <el-table-column label="日期" prop="course_date" />
        <el-table-column label="时间" prop="course_time" />
        <el-table-column label="学生" prop="nick_name" />
        <el-table-column label="老师" prop="user_name" />
        <el-table-column label="课程" prop="goods_name" />
        <el-table-column label="状态" prop="status_name">
          <template slot-scope="scope">
            <!-- <el-tag v-if="scope.row.status == 'success'" type="success">
              {{ scope.row.status_name }}
            </el-tag>
            <el-tag v-else-if="scope.row.status == 'warning'">
              {{ scope.row.status_name }}
            </el-tag>
            <el-tag v-else type="info">
              {{ scope.row.status_name }}
            </el-tag> -->
            <el-tag :type="scope.row.status">
              {{ scope.row.status_name }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="address" width="150">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.status == 'wait'"
              v-permissions="{ permission: ['consume:Courselog'] }"
              type="primary"
              @click="rowCourse(scope.row)"
            >
              划课
            </el-button>
            <el-button
              v-if="scope.row.status == 'wait'"
              v-permissions="{ permission: ['cancel:Courselog'] }"
              type="warning"
              @click="cancel(scope.row)"
            >
              取消
            </el-button>

            <el-button
              v-if="scope.row.status == 'cancel'"
              v-permissions="{ permission: ['recovery:Courselog'] }"
              type="info"
              @click="recovery(scope.row)"
            >
              恢复
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        v-if="total >= 10"
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="handleCurrentChange"
      />
    </div>
    <el-dialog
      :before-close="handleClose"
      title="理由"
      :visible.sync="Visible"
      width="30%"
    >
      <div>
        <span>日期：{{ dataLists.course_date }}</span>
        <span style="margin-left: 10px">时间：{{ dataLists.course_time }}</span>
      </div>
      <br />
      <div>
        <span>老师：{{ dataLists.user_name }}</span>
        <span style="margin-left: 10px">学生：{{ dataLists.nick_name }}</span>
      </div>
      <br />
      <div>
        <span>课程：{{ dataLists.goods_name }}</span>
      </div>
      <div style="margin-top: 10px">
        <div>请假原因</div>
        <br />
        <el-input
          v-model="forms.course_explain"
          placeholder="请输入说明内容"
          :rows="2"
          type="textarea"
        />
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="Visible = false">取 消</el-button>
        <el-button type="primary" @click="Submit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="导出" :visible.sync="ExportDialogVisible" width="30%">
      <el-table :data="exportData" style="width: 100%">
        <el-table-column label="日期" prop="updated_at" />
        <el-table-column label="操作">
          <template slot-scope="scoped">
            <el-button
              v-permissions="{ permission: ['download:Courselog'] }"
              type="text"
              @click="download(scoped.row)"
            >
              下载
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="ExportDialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {
    courseConsume,
    courseUsed,
    courseRecovery,
    courseConsumeLog,
    courseConsumeExport,
  } from '@/api/reservation'

  export default {
    components: {},
    data() {
      return {
        form: {
          pagesize: 10,
          page: 1,
          status: '',
          goods_name: '',
          user_name: '',
          nick_name: '',
          start_date: '',
          end_date: '',
        },
        total: '',
        courseOverview: {}, // 存放课程概况
        emptyText: ' ',
        tableData: [],
        Visible: false,
        dataLists: {},

        forms: {
          id: '',
          status: '',
          course_explain: '',
        },
        formData: {},
        value1: '',
        ExportDialogVisible: false,
        exportData: [],
        dateItem: [],
      }
    },
    watch: {},
    mounted() {
      const date = new Date()
      let y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d

      let dateTime = y + '-' + m + '-' + d
      this.form.start_date = dateTime
      this.form.end_date = dateTime
      this.value1 = [dateTime, dateTime]
      this.init()
    },
    methods: {
      // 初始化
      init() {
        const laoding = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        // const params = {
        //   pagesize: 10,
        //   page: this.page,
        // }
        courseConsume(this.form).then((e) => {
          this.tableData = e.data.list.data
          this.courseOverview = e.data.situation
          this.total = e.data.list.total
          this.dateItem = this.value1

          laoding.close()
          if (e.data.list.data.length == 0) {
            this.emptyText = '暂无数据'
          }
        })
      },
      // 分页
      handleCurrentChange(val) {
        const _this = this
        _this.form.page = val
        this.init()
      },
      // 划课
      rowCourse(e) {
        // this.forms.id = e.id
        // this.forms.status = 'success'
        // this.forms.course_explain = ''
        // this.Submit()

        this.$confirm('此状态待划课, 是否划课?', '划课', {
          confirmButtonText: '划课',
          cancelButtonText: '取消',
          type: 'success',
        })
          .then(() => {
            this.forms.id = e.id
            this.forms.status = 'success'
            this.forms.course_explain = ''
            this.Submit()
            this.$message({
              message: '划课成功',
              type: 'success',
            })
          })
          .catch(() => {
            this.$message.error('划课失败')
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除',
            // })
          })
      },
      // 取消
      cancel(e) {
        this.dataLists = e
        this.forms.id = e.id
        this.forms.status = 'cancel'
        this.Visible = true
      },
      // 恢复
      recovery(e) {
        this.$confirm('此状态已取消, 是否恢复?', '恢复', {
          confirmButtonText: '恢复',
          cancelButtonText: '取消',
          type: 'info',
        })
          .then(() => {
            const data = {
              id: e.id,
            }
            courseRecovery(data).then(() => {
              this.init()
            })
          })
          .catch(() => {
            // this.$message({
            //   type: 'info',
            //   message: '已取消删除',
            // })
          })
      },

      searchs() {
        this.form.page = 1
        this.total = 0

        this.init()
      },
      // 导出
      exporte() {
        courseConsumeExport(this.form).then(() => {
          this.$message({
            message: '已添加导出列表',
            type: 'success',
          })
          this.exportList()
        })
      },
      // 导出list
      exportList() {
        courseConsumeLog().then((e) => {
          this.exportData = e.data
          this.ExportDialogVisible = true
        })
      },
      download(e) {
        // const url = 'http://fan.jb.cc/' + e.src
        const url = e.base_url + e.src
        window.open(url)
      },
      datePicker(e) {
        if (e) {
          this.form.start_date = e[0]
          this.form.end_date = e[1]
        }
      },
      Reset() {
        this.total = 0
        this.form = {
          pagesize: 10,
          page: 1,
          status: '',
          goods_name: '',
          user_name: '',
          nick_name: '',
          course_date: '', // 临时起的名字，最终以接口参数名字
        }
        this.init()
      },
      // 提交
      Submit() {
        if (this.forms.status == 'cancel') {
          if (!this.forms.course_explain) {
            this.$message.error('填写原因')
            return
          }
        }
        courseUsed(this.forms).then(() => {
          this.Visible = false
          this.init()
        })
      },
      // 弹框回调
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(() => {
            done()
          })
          .catch(() => {})
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .flex_y_center {
    display: flex;
    align-items: center;
  }

  .content_items {
    display: flex;
    align-items: center;
    padding: 18px 0 18px;
  }
  .content_items > div {
    flex: 1;
    padding-left: 20px;
  }
  .content_items .items {
    border-right: 1px solid rgba(0, 0, 0, 0.1);
  }
  .content_items div .items_h {
    font-size: 12px;
    font-weight: 600;
  }
  .content_items div .items_val {
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
  }
</style>
